<template>
  <div id="Test">
    <quill-editor ref="myTextEditor"
              v-model="content" :options="quillOption">
    </quill-editor>
    
    <el-row style="margin-top: 10px;margin-left: 30%;"> 
      <el-button type="primary" plain @click="save">保存</el-button>
      <el-button type="success" plain @click="showState">预览</el-button> 
      <el-button type="success" plain>返回</el-button> 
    </el-row>

    <div>
      <p v-html="content" v-if="showContent">  </p>
    </div>
    

  </div>
</template>
 
<script>
import { quillEditor } from 'vue-quill-editor'
import quillConfig from './quill-config.js'
 
export default {
  components: {
    quillEditor
  },
  data () {
    return {
      content: '<h2>hello quill-editor</h2>',
      quillOption: quillConfig,
      showContent: false,
    }
  },
  methods: {
    save(){
      console.log(this.content)
    },
    showState(){
      if(this.showContent === false){
        this.showContent = true
      }else{
        this.showContent = false
      }

 
    }
  },
}
</script>
 
<style>
 
</style>